import { Component, OnInit, Input, HostListener, EventEmitter, Output, OnChanges, SimpleChanges } from '@angular/core';
import { TimeBusService } from '../shared/service/time-bus.service';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-time-zone',
  templateUrl: './time-zone.component.html',
  styleUrls: ['./time-zone.component.css']
})
export class TimeZoneComponent implements OnInit, OnChanges {

  @Input()
  divNumber: number;
  @Input()
  isLeftKeyDown: boolean;
  @Input()
  isAMClick: Boolean;
  @Input()
  isPMClick: Boolean;
  @Output()
  public resetKey = new EventEmitter();
  timeSubject: Subject<Array<number>>;
  timeArray: Array<number>;
  className: string;
  myClass = [];
  constructor(private timeBusService: TimeBusService) {
    this.timeSubject = this.timeBusService.timeZone;
  }

  ngOnInit() {
    if (this.divNumber) {
      this.myClass = ['time_1', `rd${this.divNumber}`, 'color2'];
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['isAMClick'] && changes['isAMClick'].currentValue) {
      this.selectAM();
    }
    if (changes['isPMClick'] && changes['isPMClick'].currentValue) {
      this.selectPM();
    }
  }


  selectAM() {
    if (this.divNumber < 13) {
      this.myClass[2] = 'color1';
      if (!this.timeBusService.timeArray.includes(this.divNumber)) {
        this.timeBusService.timeArray.push(this.divNumber);
        this.timeSubject.next(this.timeBusService.timeArray);
      }
    }
  }
  selectPM() {
    if (this.divNumber > 12) {
      this.myClass[2] = 'color1';
      if (!this.timeBusService.timeArray.includes(this.divNumber)) {
        this.timeBusService.timeArray.push(this.divNumber);
        this.timeSubject.next(this.timeBusService.timeArray);
      }
    }
  }
  // @HostListener('mouseover', ['$event'])
  // onMouseover(event: MouseEvent) {
  //   console.log('mouse over start.....');
  //   if (this.isLeftKeyDown && this.myClass[2] === 'color2') {
  //     console.log('selected.....', this.divNumber);
  //     this.myClass[2] = 'color1';
  //     if (!this.timeBusService.timeArray.includes(this.divNumber)) {
  //       this.timeBusService.timeArray.push(this.divNumber);
  //       this.timeSubject.next(this.timeBusService.timeArray);
  //     }

  //   } else if (this.isLeftKeyDown && this.myClass[2] === 'color1') {
  //     console.log('unselected.....', this.divNumber);
  //     this.myClass[2] = 'color2';
  //     this.timeBusService.timeArray = this.timeBusService.timeArray.filter(time => time !== this.divNumber);
  //     this.timeSubject.next(this.timeBusService.timeArray);
  //   }
  // }
  @HostListener('click', ['$event'])
  onClick(event) {
    if (this.myClass[2] === 'color2') {
      this.myClass[2] = 'color1';
      if (!this.timeBusService.timeArray.includes(this.divNumber)) {
        this.timeBusService.timeArray.push(this.divNumber);
        this.timeSubject.next(this.timeBusService.timeArray);
      }
    } else if (this.myClass[2] === 'color1') {
      this.myClass[2] = 'color2';
      this.timeBusService.timeArray = this.timeBusService.timeArray.filter(time => time !== this.divNumber);
      this.timeSubject.next(this.timeBusService.timeArray);
    }
  }

  @HostListener('dragend', ['$event'])
  ondrag(event: MouseEvent) {
    this.resetKey.emit();
  }
}
